<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="js/set_root.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/city.css">
    <link rel="stylesheet" href="css/iconfont.css">
</head>

<body>
    <div class="city_wrap">
        <div class="city_title">
            <span class="shutoff iconfont icon-shut"></span>
            <h3>选择城市</h3>
        </div>

        <div class="group_con">
            <div class="city_group">
                <h4>当前定位</h4>
                <ul>
                    <li>深圳</li>
                </ul>
            </div>
            <div class="city_group">
                <h4>热门城市</h4>
                <ul>
                    <li>北京</li>
                    <li>上海</li>
                    <li>广州</li>
                </ul>
            </div>
            <div class="city_group">
                <h4>A</h4>
                <ul>
                    <li>安庆</li>
                </ul>
            </div>
            <div class="city_group">
                <h4>B</h4>
                <ul>
                    <li>北京</li>
                    <li>北海</li>
                    <li>宝鸡</li>
                    <li>保定</li>
                    <li>保亭</li>
                </ul>
            </div>
            <div class="city_group">
                <h4>C</h4>
                <ul>
                    <li>成都</li>
                    <li>重庆</li>
                    <li>长沙</li>
                    <li>常德</li>
                    <li>常州</li>
                    <li>澄迈</li>
                    <li>承德</li>
                    <li>滁州</li>
                    <li>长春</li>
                </ul>
            </div>
        </div>
        <ul class="city_index">
            <li><span>#</span></li>
            <li><span>热</span></li>
            <li class="active"><span>A</span></li>
            <li><span>B</span></li>
            <li><span>C</span></li>
            <li><span>D</span></li>
            <li><span>F</span></li>
            <li><span>G</span></li>
            <li><span>H</span></li>
            <li><span>J</span></li>
            <li><span>K</span></li>
            <li><span>L</span></li>
            <li><span>M</span></li>
            <li><span>N</span></li>
            <li><span>Q</span></li>
            <li><span>S</span></li>
            <li><span>T</span></li>
            <li><span>W</span></li>
            <li><span>X</span></li>
            <li><span>Y</span></li>
            <li><span>Z</span></li>
        </ul>
    </div>
</body>

</html>